<template>
	<div id="app">
		<router-view></router-view>
		<footer v-show='footer'>
			<router-link to="/" class="home_tab">
				<div :class="{on:act}"><em></em>
					<p>活动</p>
				</div>
			</router-link>
			<router-link to="/ranking" class="home_tab">
				<div :class="{on:rank}"><em></em>
					<p>排名</p>
				</div>
			</router-link>
			<router-link to="/bonus" class="home_tab">
				<div :class="{on:bonus}"><em></em>
					<p>去抽奖</p>
				</div>
			</router-link>
		</footer>
	</div>
</template>

<script type="text/ecmascript-6">
	export default {
		name: 'app',
		data() {
			return {
				a:''
			}
		},
		created() {
			
		},
		computed: {
			act(){
				return this.$store.state.cur_act
			},
			rank(){
				return this.$store.state.cur_rank
			},
			bonus(){
				return this.$store.state.cur_bonus
			},
			footer(){
				return this.$store.state.showfooter
			}
		}
	}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
	@import "assets/scss/_mixin";
	#app {
		max-width: 720px/$ppr;
		height: auto;
		margin: 0 auto;
	}
	.banner {
		width: 720px/$ppr;
		height: 550px/$ppr;
		background: url(assets/img/banner.png);
		background-size: 100% 550px/$ppr;
		position: relative;
		top: 0;
		left: 0;
		z-index: 1;
		.btn_share {
			width: 252px/$ppr;
			height: 58px/$ppr;
			background: #fff100;
			text-align: center;
			display: block;
			line-height: 58px/$ppr;
			font-size: 28px/$ppr;
			color: #6e3701;
			border-radius: 50px/$ppr;
			left: 50%;
			transform: translateX(-50%);
			position: absolute;
			top: 388px/$ppr;
		}
		p.time {
			display: inline-block;
			width: 360px/$ppr;
			position: absolute;
			left: 50%;
			transform: translateX(-50%);
			top: 465px/$ppr;
			font-size: 24px/$ppr;
			color: #f4fb32;
			line-height: 48px/$ppr;
			text-align: center;
		}
	}
	
	.permsg {
		width: 100%;
		height: 489px/$ppr;
		background: url(assets/img/per_bg.png) no-repeat center;
		background-size: 100% 489px/$ppr;
		top: -40px/$ppr;
		position: relative;
		z-index: 0;
		div {
			width: 96px/$ppr;
			height: 96px/$ppr;
			line-height: 96px/$ppr;
			text-align: center;
			font-size: 30px/$ppr;
			color: #fff;
			position: absolute;
			top:80px/$ppr;
			&.score {
				left:129px/$ppr;
				background: url(assets/img/jf_bg.png) no-repeat center;
				background-size: 96px/$ppr 96px/$ppr;
			}
			&.rank {
				right:116px/$ppr;
				background: url(assets/img/pm_bg.png) no-repeat center;
				background-size: 96px/$ppr 96px/$ppr;
			}
		}
	}
	footer {
		width: 100%;
		height: 136px/$ppr;
		background: url(assets/img/footer_bg.png) no-repeat center;
		background-size: 100% 136px/$ppr;
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 10;
		&:after {
			content: '';
			display: table-cell;
			clear: both;
		}
		a {
			div {
				width: 33%;
				float: left;
				text-align: center;
				color: #fff;
				font-size: 30px/$ppr;
				em {
					margin-top: 20px/$ppr;
				}
				p {
					margin-top: 10px/$ppr;
				}
				&.on {
					color: #ffc745 !important;
					font-weight: bold;
				}
			}
			&:nth-child(1) div {
				em {
					display: inline-block;
					width: 68px/$ppr;
					height: 58px/$ppr;
					background: url(assets/img/icon_act.png);
					background-size: 68px/$ppr 58px/$ppr;
				}
			}
			&:nth-child(2) div {
				em {
					display: inline-block;
					width: 62px/$ppr;
					height: 56px/$ppr;
					background: url(assets/img/icon_rank.png);
					background-size: 62px/$ppr 56px/$ppr;
				}
			}
			&:nth-child(3) div {
				em {
					display: inline-block;
					width: 62px/$ppr;
					height: 54px/$ppr;
					background: url(assets/img/icon_award.png);
					background-size: 62px/$ppr 54px/$ppr;
				}
			}
		}
	}
</style>